<template>
  <div class="address">
    <div class="header">
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        round
        @click="addRegionDialog = true"
        >新增乡镇</el-button
      >
    </div>
    <!-- 页面数据 -->
    <div class="table">
      <el-table :data="tableData" height="600" border style="width: 100%" @row-click="handler">
        <el-table-column prop="id" label="id" width="40"> </el-table-column>
        <el-table-column
          prop="region_name"
          label="乡镇名称"
          width="180"
        ></el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            {{ scope.row.createDate }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click.stop="updateRegion(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click.stop="delRegion(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增乡镇dialog -->
    <el-dialog title="新增乡镇" :visible.sync="addRegionDialog">
      <el-form :model="addRegionForm">
        <el-form-item label="乡镇名称" label-width="80">
          <el-input v-model="addRegionForm.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset('add')">取 消</el-button>
        <el-button type="primary" @click="addRegion"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="修改乡镇" :visible.sync="updateDialog">
      <el-form :model="updateRegionForm">
        <el-form-item label="乡镇名称" label-width="80">
          <el-input v-model="updateRegionForm.region_name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset('update')">取 消</el-button>
        <el-button type="primary" @click="update"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getRegion,addRegion,updateRegion,deleteRegion } from "@/api/town";
import { dateFormat } from '@/utils/utils';
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "address",
  data() {
    return {
      tableData: [],
      addRegionDialog: false,
      updateDialog:false,
      addRegionForm:{
        name:''
      },
      updateRegionForm:{
        id:'',
        name:'',
        createTime:''
      }
    };
  },
  components: {},
  props: {},
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {
    this.getRegion();
  },
  methods: {
    getRegion() {
      getRegion().then((res) => {
        if (res.status === 0) {
          this.tableData = res.data;
          this.tableData.forEach(item=>{
            item.createDate = dateFormat(item.createTime)
          })
        }
      });
    },
    reset(item){
      if(item === 'add'){
        this.addRegionDialog = false
        this.addRegionForm = {
          name:''
        }
      }
      if(item === 'update'){
        this.updateDialog = false
        this.updateRegionForm = {
          id:'',
          region_name:'',
          createTime:""
        }
      }
    },
    addRegion(){
      addRegion(this.addRegionForm).then(res=>{
        if(res.status === 0){
          this.getRegion()
          this.$message.success(res.message)
          this.addRegionDialog = false
        }
      })
    },
    updateRegion(item){
      this.updateRegionForm = { ...item }
      this.updateDialog = true
    },
    update(){
      updateRegion(this.updateRegionForm).then(res=>{
        if(res.status===0){
          this.$message.success(res.message)
          this.getRegion()
          this.updateDialog = false
        }
      })
    },
    delRegion(item){
      deleteRegion(item).then(res=>{
        if(res.status===0){
          this.$message.success(res.message)
          this.getRegion()
        }
      })

    },
    handler(row){
      this.$router.push({
        path:`/town/${row.id}`
      })
    }
  },
};
</script>
<style lang='less' scoped>
.header {
  text-align: left;
  margin-bottom: 10px;
}
</style>